<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers - Quick Start</title>
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
      window[disableStr] = true;
    }
    function gaOptout() {
      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = true;
    }
    function gaOptoutRevoke() {
      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = false;
    }
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
    </script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script>
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        'palette': {
          'popup': {
            'background': '#eaf7f7',
            'text': '#5c7291'
          },
          'button': {
            'background': '#56cbdb',
            'text': '#ffffff'
          }
        },
        'theme': 'edgeless',
        'type': 'opt-out',
        'onInitialise': function (status) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onStatusChange': function(status, chosenBefore) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onRevokeChoice': function() {
          gaOptoutRevoke()
        }
      })
    });
    </script>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
    <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='../../../assets/theme/site.css' rel='stylesheet' type='text/css'>
    <link rel="icon" type="image/x-icon" href="../../../assets/theme/img/favicon.ico" />
    
  </head>
  <body>
    <header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
      <a href='/' class='navbar-brand'><img src='../../../assets/theme/img/logo70.png'>&nbsp;OpenLayers</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- menu items that get hidden below 768px width -->
      <nav class="collapse navbar-collapse" id="olmenu">
        <ul class='nav navbar-nav  ml-auto'>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle active" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
              <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/en/latest/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                <a class="dropdown-item" href="/en/latest/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                <a class="dropdown-item" href="/en/latest/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
          <li class="nav-item"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
            <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
           </li>
        </ul>
      </nav>
    </header>
    

<div class='container'>
<h1 id="quick-start">Quick Start</h1>
<p>This primer shows you how to put a simple map on a web page.</p>
<p><strong>For production, we strongly recommend bundling the application together with its dependencies, as explained in the <a href="./tutorials/bundle.html">Building an OpenLayers Application</a> tutorial.</strong></p>
<h2 id="put-a-map-on-a-page">Put a map on a page</h2>
<p>Below you&#39;ll find a complete working example.  Create a new file, copy in the contents below, and open in a browser:</p>
<pre><code class="language-xml"><span class="doctype">&lt;!doctype html&gt;</span>
<span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">head</span>&gt;</span>
    <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span>
    <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>&gt;</span>
    <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css">
      <span class="class">.map</span> <span class="rules">{
        <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">400</span>px</span></span>;
        <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>%</span></span>;
      <span class="rule">}</span></span>
    </span><span class="tag">&lt;/<span class="title">style</span>&gt;</span>
    <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
    <span class="tag">&lt;<span class="title">title</span>&gt;</span>OpenLayers example<span class="tag">&lt;/<span class="title">title</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">head</span>&gt;</span>
  <span class="tag">&lt;<span class="title">body</span>&gt;</span>
    <span class="tag">&lt;<span class="title">h2</span>&gt;</span>My Map<span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map"</span> <span class="attribute">class</span>=<span class="value">"map"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
    <span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript">
      <span class="keyword">var</span> map = <span class="keyword">new</span> ol.Map({
        target: <span class="string">'map'</span>,
        layers: [
          <span class="keyword">new</span> ol.layer.Tile({
            source: <span class="keyword">new</span> ol.source.OSM()
          })
        ],
        view: <span class="keyword">new</span> ol.View({
          center: ol.proj.fromLonLat([<span class="number">37.41</span>, <span class="number">8.82</span>]),
          zoom: <span class="number">4</span>
        })
      });
    </span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">body</span>&gt;</span>
<span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></pre>
<h2 id="understanding-what-is-going-on">Understanding what is going on</h2>
<p>To include a map a web page you will need 3 things:</p>
<ol>
<li>Include OpenLayers</li>
<li><code>&lt;div&gt;</code> map container</li>
<li>JavaScript to create a simple map</li>
</ol>
<h3 id="include-openlayers">Include OpenLayers</h3>
<pre><code class="language-xml">  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></pre>
<p>The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.</p>
<p><strong>Optional:</strong> If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:</p>
<pre><code class="language-xml">  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></pre>
<h3 id="-div-to-contain-the-map"><code>&lt;div&gt;</code> to contain the map</h3>
<pre><code class="language-xml">  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map"</span> <span class="attribute">class</span>=<span class="value">"map"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></pre>
<p>The map in the application is contained in a <a href="https://en.wikipedia.org/wiki/Span_and_div"><code>&lt;div&gt;</code> HTML element</a>. Through this <code>&lt;div&gt;</code> the map properties like width, height and border can be controlled through CSS. Here&#39;s the CSS element used to make the map 400 pixels high and as wide as the browser window.</p>
<pre><code class="language-xml">  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css">
    <span class="class">.map</span> <span class="rules">{
      <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">400</span>px</span></span>;
      <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>%</span></span>;
    <span class="rule">}</span></span>
  </span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></pre>
<h3 id="javascript-to-create-a-simple-map">JavaScript to create a simple map</h3>
<pre><code class="language-js">  <span class="keyword">var</span> map = <span class="keyword">new</span> ol.Map({
    target: <span class="string">'map'</span>,
    layers: [
      <span class="keyword">new</span> ol.layer.Tile({
        source: <span class="keyword">new</span> ol.source.OSM()
      })
    ],
    view: <span class="keyword">new</span> ol.View({
      center: ol.proj.fromLonLat([<span class="number">37.41</span>, <span class="number">8.82</span>]),
      zoom: <span class="number">4</span>
    })
  });</code></pre>
<p>With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let&#39;s break this down:</p>
<p>The following line creates an OpenLayers <code>Map</code> object. Just by itself, this does nothing since there&#39;s no layers or interaction attached to it.</p>
<pre><code class="language-js">  <span class="keyword">var</span> map = <span class="keyword">new</span> ol.Map({ ... });</code></pre>
<p>To attach the map object to the <code>&lt;div&gt;</code>, the map object takes a <code>target</code> into arguments. The value is the <code>id</code> of the <code>&lt;div&gt;</code>:</p>
<pre><code class="language-js">    target: <span class="string">'map'</span></code></pre>
<p>The <code>layers: [ ... ]</code> array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:</p>
<pre><code class="language-js">    layers: [
      <span class="keyword">new</span> ol.layer.Tile({
        source: <span class="keyword">new</span> ol.source.OSM()
      })
    ]</code></pre>
<p>Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.</p>
<p>The next part of the <code>Map</code> object is the <code>View</code>. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level.  Note that zoom level 0 is zoomed out.</p>
<pre><code class="language-js">    view: <span class="keyword">new</span> ol.View({
      center: ol.proj.fromLonLat([<span class="number">37.41</span>, <span class="number">8.82</span>]),
      zoom: <span class="number">4</span>
    })</code></pre>
<p>You will notice that the <code>center</code> specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.</p>

</div>

    <footer>
      Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.  All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>. Thanks to our <a href='/sponsors.html'>sponsors</a>.
      <br>
      <a href="https://www.netlify.com">
        This site is powered by Netlify.
      </a>
    </footer>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
    
  </body>
</html>
